<template>
  <div>
    <div>
      <el-form :inline="true" :model="param">
        <el-form-item label="商品名称/商品">
          <el-input v-model="param.search_words" placeholder="商品名称/商品ID" clearable></el-input>
        </el-form-item>
        <el-form-item label="来源">
          <el-select v-model="param.source" placeholder="来源" @change="sourceChange">
            <el-option v-for="item in sourceArr" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="分类">
          <el-cascader ref="cascader" v-if="cascaderShow" v-model="category_idArr" :props="props" @change="categoryChange" clearable></el-cascader>
          <el-select v-else v-model="category_test" placeholder="请选择"> </el-select>
        </el-form-item>
        <el-form-item label="是否包邮">
          <el-select v-model="param.is_free_shipping" placeholder="是否包邮">
            <el-option v-for="item in is_free_shippingArr" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品状态">
          <el-select v-model="param.status" placeholder="商品状态">
            <el-option label="下架" :value="0"></el-option>
            <el-option label="正常" :value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="营销价">
          <el-input style="width: 110px;" v-model="param.activity_price.from" placeholder="区间开始" clearable></el-input>
          -
          <el-input style="width: 110px;" v-model="param.activity_price.to" placeholder="区间结束" clearable></el-input>
        </el-form-item>
        <el-form-item label="指导价">
          <el-input style="width: 110px;" v-model="param.guide_price.from" placeholder="区间开始" clearable></el-input>
          -
          <el-input style="width: 110px;" v-model="param.guide_price.to" placeholder="区间结束" clearable></el-input>
        </el-form-item>
        <el-form-item label="协议价">
          <el-input style="width: 110px;" v-model="param.agreement_price.from" placeholder="区间开始" clearable></el-input>
          -
          <el-input style="width: 110px;" v-model="param.agreement_price.to" placeholder="区间结束" clearable></el-input>
        </el-form-item>
        <!-- <el-form-item label="毛利率">
          <el-input style="width: 110px;" v-model="param.gross_profit_rate.from" placeholder="区间开始" clearable></el-input>
          -
          <el-input style="width: 110px;" v-model="param.gross_profit_rate.to" placeholder="区间结束" clearable></el-input>
        </el-form-item> -->
        <el-form-item label="利润率">
          <el-input style="width: 110px;" v-model="param.promotion_rate.from" placeholder="区间开始" clearable></el-input>
          -
          <el-input style="width: 110px;" v-model="param.promotion_rate.to" placeholder="区间结束" clearable></el-input>
        </el-form-item>
        <!-- <el-form-item label="折扣" >
           <el-input style="width: 110px;" v-model="param.order_code" placeholder="区间开始" clearable></el-input>
           -
            <el-input style="width: 110px;" v-model="param.order_code" placeholder="区间结束" clearable></el-input>
        </el-form-item> -->
        <el-form-item>
          <el-button @click="getDataList()">查询</el-button>
          <el-button icon="el-icon-refresh-left" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="dataList" ref="multipleTable" v-loading="tableLoading" row-key="Id" border style="width: 100%;">
        <el-table-column align="center" label="序号" width="80">
          <template slot-scope="scope">
            <span>{{ (param.page - 1) * param.limit + scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="shop_name" align="center" label="商品图片">
          <template slot-scope="scope">
            　　　　<el-popover placement="top-start" trigger="hover">
              <a :href="scope.row.cover" target="_blank" title="查看最大化图片"><img :src="scope.row.cover" style="width: 300px;height: 300px" /></a>
              <img slot="reference" :src="scope.row.cover" @click="$openImg(scope.row.cover)" style="width: 50px;height: 50px; cursor:pointer" />
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="title" align="center" label="商品名称">
        </el-table-column>
        <el-table-column prop="address" align="center" label="来源">
          <template slot-scope="scope">
            <div v-for="(v, i) in sourceArr" :key="i" v-if="v.value === scope.row.source">{{ v.label }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="status" align="center" label="商品状态">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.status === 1">正常</el-tag>
            <el-tag type="warning" v-if="scope.row.status === 0">下架</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="third_category_name" align="center" label="分类">
        </el-table-column>
        <el-table-column prop="market_price" align="center" label="市场价">
          <template slot-scope="scope">
            {{ scope.row.market_price / 100 }}
          </template>
        </el-table-column>
        <el-table-column prop="guide_price" align="center" label="指导价">
          <template slot-scope="scope">
            {{ scope.row.guide_price / 100 }}
          </template>
        </el-table-column>
        <el-table-column prop="agreement_price" align="center" label="协议价">
          <template slot-scope="scope">
            {{ scope.row.agreement_price / 100 }}
          </template>
        </el-table-column>
        <!-- <el-table-column prop="activity_rate" align="center" label="毛利率">
        </el-table-column> -->
        <el-table-column prop="rate" align="center" label="利润率">
        </el-table-column>
        <!--       <el-table-column prop="address" align="center" label="折扣">
        </el-table-column>
        <el-table-column prop="address" align="center" label="是否上架">
        </el-table-column> -->
        <el-table-column prop="address" align="center" label="是否已下拉">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.pull">是</el-tag>
            <el-tag type="warning" v-else>否</el-tag>
          </template>
        </el-table-column>
        <el-table-column fixed="right" header-align="center" align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="openDetails(scope.row)">查看详情</el-button>
            <el-button type="text" size="small" v-if="!scope.row.pull" @click="openDialog(scope.row)">下拉</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="param.page" :page-sizes="[10, 20, 50, 100]" :page-size="param.limit" :total="total" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
    </div>
    <!-- 上架弹窗 -->
    <el-dialog title="上架商品" :visible.sync="dialogVisible" width="40%">
      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
        <el-form-item label="商品名称" prop="pass">
          {{ ruleForm.title }}
        </el-form-item>
        <el-form-item label="商品平台分类" prop="category_ids" :rules="{ required: true, message: '请选择商品平台分类', trigger: 'blur' }">
          <el-cascader style="width: 80%;" v-model="ruleForm.category_ids" :options="categoryAll" :props="{ checkStrictly: true, label: 'name', value: 'id' }" clearable></el-cascader>
        </el-form-item>
        <el-form-item label="商品店铺分组" prop="goods_group_idsArr" :rules="{ required: true, message: '请选择商品店铺分组', trigger: 'blur' }">
          <el-cascader style="width: 80%;" v-model="ruleForm.goods_group_idsArr" :options="shopGoodsTypeList" :props="{ checkStrictly: true, label: 'name', value: 'id', multiple: true }" clearable></el-cascader>
        </el-form-item>
        <el-form-item label="赠送多少贡献值" prop="consumption_value" :rules="{ required: true, message: '请输入贡献值', trigger: 'blur' }">
          <el-input-number v-model="ruleForm.consumption_value" :min="0" :precision="2" :step="1" placeholder="请输入">
          </el-input-number>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog()">取 消</el-button>
        <el-button type="primary" @click="grounding()" :loading="btnLoading">提交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import onlineSelectionApi from '@/api/onlineSelectionApi.js'
import serviceApi from '@/api/serviceApi.js'
export default {
  data () {
    return {
      param: {
        page: 1,
        limit: 10,
        agreement_price: {},
        guide_price: {},
        activity_price: {},
        promotion_rate: {},
        profits: {},
        gross_profit_rate: {},
        source: 0,
        is_free_shipping: -1
      },
      dataList: [],
      total: null,
      tableLoading: false,
      dialogVisible: false,
      ruleForm: {},
      sourceArr: [{
        label: "全部",
        value: 0
      },
      {
        label: "云仓",
        value: 1
      },
      {
        label: "京东",
        value: 2
      },
      {
        label: "阿里巴巴",
        value: 6
      },
      {
        label: "天猫",
        value: 7
      },
      {
        label: "苏宁",
        value: 8
      },
      {
        label: "华南一仓",
        value: 11
      },
      {
        label: "特卖一仓",
        value: 12
      },
      {
        label: "华东一仓",
        value: 14
      },
      {
        label: "淘宝",
        value: 15
      },
      {
        label: "跨境一仓",
        value: 16
      },
      ],
      is_free_shippingArr: [{
        label: "全部",
        value: -1
      },
      {
        label: "包邮",
        value: 1
      }, {
        label: "不包邮",
        value: 0
      },
      ],
      rules: {},
      props: {
        label: "title",
        value: "id",
        lazy: true,
        lazyLoad: this.lazyLoad
      },
      category_idArr: [],
      cascaderShow: true,
      categoryAll: [], //商品平台分类
      shopGoodsTypeList: [], //商家商品分组列表
      btnLoading: false,
    }
  },
  created () {
    this.getList();
    this.getGoodsType();
    this.getShopGoodsType()
  },
  methods: {
    // 每页数
    sizeChangeHandle (val) {
      this.param.limit = val
      this.getList()
    },
    // 当前页
    currentChangeHandle (val) {
      this.param.page = val
      this.getList()
    },
    // 查询
    getDataList () {
      this.param.page = 1
      this.getList()
    },
    // 重置
    reset () {
      this.param = {
        page: 1,
        limit: 10,
        agreement_price: {},
        guide_price: {},
        activity_price: {},
        promotion_rate: {},
        gross_profit_rate: {},
        profits: {},
        source: 0,
        is_free_shipping: -1
      }
      this.category_idArr = [];
      this.$forceUpdate()
      this.getList()
    },
    sourceChange () {
      this.cascaderShow = false;
      // this.category_idArr = [];
      // this.param.category_id=null;
      this.$refs.cascader.handleClear();
      setTimeout(() => {
        this.cascaderShow = true;
      }, 100)
    },
    // 商品平台分类
    getGoodsType () {
      serviceApi.getCategoryAllList().then(res => {
        if (res && res.data.code === 200) {
          this.categoryAll = res.data.list;
          if (this.categoryAll && this.categoryAll.length > 0) {
            this.dealTree(this.categoryAll)
          }
        }
      })
    },
    // 商家商品分组列表
    getShopGoodsType () {
      serviceApi.getGoodsGroupsList().then(res => {
        if (res && res.data.code === 200) {
          this.shopGoodsTypeList = res.data.list;
          if (this.shopGoodsTypeList && this.shopGoodsTypeList.length > 0) {
            this.dealTree(this.shopGoodsTypeList)
          }
        }
      })
    },
    // 查看详情
    openDetails (row) {
      window.open('http://scm.jxhh.com/pxh/goodsdetail?id=' + row.id)
    },
    dealTree (data) {
      data.forEach(v => {
        if (v.children.length <= 0) {
          v.children = null
        } else {
          this.dealTree(v.children)
        }
      })
    },
    // 搜索分类 tree
    lazyLoad (node, resolve) {
      const {
        level
      } = node;
      let par = {
        source: this.param.source,
        parent_id: node.data ? node.data.id : 0
      }
      onlineSelectionApi.questCategoryList(par).then(res => {
        if (res && res.data.code === 200) {
          resolve(res.data.data);
        }
      })
    },
    // 打开下拉弹窗
    openDialog (row) {
      this.dialogVisible = true;
      this.ruleForm.title = row.title;
      this.ruleForm.third_spu_id = row.id;
    },
    closeDialog () {
      this.$refs.ruleForm.resetFields();
      this.dialogVisible = false;
      this.ruleForm = {};
    },
    //下拉
    grounding (row) {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          let data = {
            category_id: this.ruleForm.category_ids[this.ruleForm.category_ids.length - 1],
            goods_group_ids: [],
            third_spu_id: this.ruleForm.third_spu_id,
            consumption_value: this.ruleForm.consumption_value
          }
          this.ruleForm.goods_group_idsArr.forEach(v => {
            data.goods_group_ids.push(v[v.length - 1])
          })
          this.btnLoading = true;
          onlineSelectionApi.supplychainGoodsPull(data).then(res => {
            if (res && res.data.code === 200) {
              this.closeDialog()
              this.getList();
              this.$message.success('下拉成功')
            }
          }).finally(() => { this.btnLoading = false; })
        }
      })
    },
    categoryChange (e) {
      this.param.category_id = e[e.length - 1]
    },
    getList () {
      this.tableLoading = true;
      // agreement_price: {},
      //   guide_price: {},
      //   activity_price: {},
      //   promotion_rate: {},
      //   profits: {},
      // let paramCopy = JSON.parse(JSON.stringify(this.param))
      // for (let v in this.param) {
      //   if (Object.prototype.toString.call(paramCopy[v]) === '[object Object]' && paramCopy[v].to !== null && paramCopy[v].to !== '' && paramCopy[v].from !== '' && paramCopy[v].from !== null) {
      //     paramCopy[v].to = paramCopy[v].to * 1;
      //     paramCopy[v].from = paramCopy[v].from * 1
      //   }
      // }
      // this.param.activity_price = { from: 10, to: 100 };
      onlineSelectionApi.supplychainGoodsPage(this.param).then(res => {
        if (res && res.data.code == 200) {
          this.dataList = res.data.page.list
          this.total = res.data.page.totalCount
        }
        this.tableLoading = false;
      })
    },
  }
}
</script>

<style></style>
